<template>
  <div class="paginatable">
    <el-table
        :border="true"
        :row-class-name="tableRowClassName"
        :max-height="maxHeight"
        :height="height"
        :data="tblOpts.data"
        element-loading-text="拼命加载中..."
        @select="selectHandler"
        @selection-change="selectionChangeHandler"
        @row-click="rowClickHandler"
        @row-dblclick="rowDblclickHandler"
        @sort-change="sortChangeHandler"
        :show-summary="showSummary"
        :summary-method="summaryMethodHandler"
        ref="dataTable"
        size="small"
        :highlight-current-row="!multiSelect"
        :header-cell-style="{background:'#F8F8F8'}"
    >
      <el-table-column v-if="multiSelect" type="selection" width="55" align="center" fixed/>
      <template v-for="(col, key) in tblOpts.cols">
        <el-table-column v-if="col.type == 'img'" :key="key" :prop="col.prop" :label="col.label"
                         :align="col.align || 'center'" :width="fitCols ? '' : col.width ? col.width : 200">
          <template slot-scope="scope">
            <el-image v-if="scope.row[col.prop]" :src="scope.row[col.prop]" style="width: 70px;height: 70px"
                      @click="previewHandler(scope.row[col.prop])"/>
          </template>
        </el-table-column>
        <el-table-column v-else-if="col.type=='cus'" :key="key" :prop="col.prop" :label="col.label"
                         :align="col.align || 'center'" :width="col.width ? col.width : 120" :fixed="col.fixed">
          <template slot-scope="scope">
            <div v-html="col.cellFormatter(scope.row)">
            </div>
          </template>
        </el-table-column>
        <el-table-column v-else-if="col.type=='discount'" :key="key" :prop="col.prop" :label="col.label"
                         :align="col.align || 'center'" :width="col.width ? col.width : 220" :fixed="col.fixed">
          <template slot-scope="scope">
            <el-row>
              <el-input-number :min="0.00" size="mini" :precision="4"
                               v-model="scope.row[col.discountFiled]"></el-input-number>
              <el-button plain type="primary" style="margin-left: 5px" size="mini"
                         @click="handleClick('discountChange',scope.row,scope)">改价
              </el-button>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column v-else-if="col.type=='saleAmount'" :key="key" :prop="col.prop" :label="col.label"
                         :align="col.align || 'center'" :width="col.width ? col.width : 220" :fixed="col.fixed">
          <template slot-scope="scope">
            <el-row>
              <el-input-number :min="0.00" size="mini" :precision="4"
                               v-model="scope.row[col.saleAmountFiled]"></el-input-number>
              <el-button plain type="primary" style="margin-left: 5px" size="mini"
                         @click="handleClick('saleAmountChange',scope.row,scope)">改价
              </el-button>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column v-else-if="col.type=='agentGoodsSelect'" :key="key" :prop="col.prop" :label="col.label"
                         :align="col.align || 'center'" :width="col.width ? col.width : 150" :fixed="col.fixed">
          <template slot-scope="scope">
            <el-row>
              <el-select size="mini" clearable
                         v-model="scope.row[col.statusFiled]"
                         name="type"
                         @change="handleClick('statusChange',scope.row,scope)">
                <el-option :value="1" label="正常"></el-option>
                <el-option :value="2" label="维护"></el-option>
              </el-select>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column v-else-if="col.type=='writeOffCode'" :key="key" :prop="col.prop" :label="col.label"
                         :align="col.align || 'center'" :width="col.width ? col.width : 150" :fixed="col.fixed">
          <template slot-scope="scope">
            <span> {{ scope.row[col.writeOffNoFiled] }} </span><br><a v-if="scope.row[col.writeOffNoFiled]" style="color: #349CFB"
                                                                      @click="handleClick('showWriteOffCode',scope.row,scope)">查看核销码</a>
          </template>
        </el-table-column>
        <el-table-column v-else-if="col.type=='cusBtn'" :key="key" :prop="col.prop" :label="col.label"
                         :align="col.align || 'center'" :width="col.width ? col.width : 300" fixed="right">
          <template slot-scope="scope">
            <template v-for="(k,index) in col.btnKeyFormatter(scope.row)"
                      v-if="col.btnKeyFormatter(scope.row).length>0">
              <template v-for="item in privileges">
                <template v-if="item.path === k">
                  <el-button @click="handleClick(item.path,scope.row,scope)"
                             type="text" style="margin-right: 10px" plain size="mini"
                             :icon="`el-icon-`+item.icon"
                             :key="k + item.path">{{ item.menuName }}
                  </el-button>
                  <br v-if="(index+1)%4===0" :key="'br'+k + item.path"/>
                </template>
              </template>
            </template>
            <template v-if="col.btnKeyFormatter(scope.row).length<=0">
              <span>--</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column
            v-else
            :show-overflow-tooltip="true"
            :formatter="col.formatter"
            :sortable="col.sortable || false"
            :key="key"
            :prop="col.prop"
            :label="col.label"
            :align="col.align || 'center'"
            :width="fitCols ? '' : col.width ? col.width : 120"
        />
      </template>
      <el-table-column :show-overflow-tooltip="true" v-if="keys.length>0"
                       label="操作"
                       align="center"
                       fixed="right"
                       :width="tblOpts.buttonColWidth">
        <template slot-scope="scope">
          <template v-for="(k,index) in keys">
            <template v-for="item in privileges">
              <template v-if="item.path === k">
                <el-button @click="handleClick(item.path,scope.row,scope)"
                           type="text" style="margin-right: 10px" plain size="mini"
                           :icon="`el-icon-`+item.icon"
                           :key="k + item.path">{{ item.menuName }}
                </el-button>
                <br v-if="(index+1)%4===0" :key="'br'+k + item.path"/>
              </template>
            </template>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination" v-show="paginable">
      <el-pagination
          style="margin-top: 10px"
          @size-change="sizeChangeHandler"
          @current-change="currentChangeHandler"
          :page-size="pageSize"
          :page-sizes="[10,30, 50, 200, 500, 1000, 2000]"
          :current-page="pageNo"
          :total="tblOpts.total"
          background
          layout="total, sizes, prev, pager, next, jumper"
      />
    </div>
    <el-dialog :visible.sync="innerDialogVisible" :close-on-click-modal="false">
      <img width="90%" height="90%" :src="innerDialogImageUrl" alt=""/>
    </el-dialog>
  </div>
</template>
<style scoped>
.goods_col_price {
  width: 200px;
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.goods_col {
  display: flex;
  justify-content: center;
  align-items: center;
}

.line-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

<script>

export default {
  props: {
    keys: {
      type: Array,
      default: () => []
    },
    privileges: {
      type: Array,
      default: () => []
    },
    tblOpts: {
      type: Object,
      default: () => {
        return {
          buttonColWidth: 300,
          pageNo: 1,
          pageSize: 10,
          total: 0,
          maxHeight: 340,
          height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight - 240,
          fitCols: false,
          paginable: true,
          multiSelect: false,
          selection: [],
          cols: [],
          data: [],
          searchHeight: 100,
        }
      }
    }
  },
  data() {
    return {
      innerDialogVisible: false,
      innerDialogImageUrl: ''
    }
  },
  computed: {
    fitCols: function () {
      return this.tblOpts.fitCols || false
    },
    showSummary: function () {
      return this.tblOpts.showSummary || false
    },
    paginable: function () {
      return this.tblOpts.paginable !== false
    },
    pageNo: function () {
      return this.tblOpts.pageNo || 1
    },
    pageSize: function () {
      return this.tblOpts.pageSize || 50
    },
    maxHeight: function () {
      return this.tblOpts.maxHeight || 500
    },
    searchHeight: function () {
      return this.tblOpts.searchHeight || 300
    },
    height: function () {
      //  列表高度=屏幕高度 - 其他高度
      let hetght = (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) - this.searchHeight || 300
      return hetght
    },
    multiSelect: function () {
      return this.tblOpts.multiSelect !== false
    }
  },
  watch: {
    'tblOpts.data'() {
      this.$nextTick(() => {
        this.$refs.dataTable.doLayout()
      })
    }
  },
  activated() {
    this.$nextTick(() => {
      this.$refs.dataTable.doLayout()
    })
  },
  methods: {
    selectRow(selectRowList) {
      selectRowList.forEach(e => {
        if (this.$refs.dataTable) {
          this.$refs.dataTable.toggleRowSelection(e, true)
        }
      })
    },
    srcImg(imgPath) {
      return this.$config.imgUrl + '/' + imgPath
    },
    previewHandler(imgPath) {
      this.innerDialogImageUrl = imgPath
      this.innerDialogVisible = true
    },
    tableRowClassName({row, rowIndex}) {
      row.rowIndex = rowIndex
    },
    selectHandler(val, row) {
      this.tblOpts.selection = val
      this.$emit('row-select', row)
    },
    selectionChangeHandler(val) {
      this.tblOpts.selection = val
    },
    rowClickHandler(row, event, column) {
      this.$emit('row-click', row, event, column)
    },
    rowDblclickHandler(row, event) {
      this.$emit('row-dblclick', row, event)
    },
    sortChangeHandler({col, prop, order}) {
      this.tblOpts.prop = prop
      this.tblOpts.order = order === 'ascending' ? 'asc' : 'desc'
      this.currentChangeHandler(1)
    },
    summaryMethodHandler(param) {
      this.$emit('on-summaryMethod', param)
    },
    sizeChangeHandler(pageSize) {
      this.tblOpts.pageNo = 1
      this.tblOpts.pageSize = pageSize
      this.$emit('on-pagination', this.tblOpts.pageNo)
    },
    currentChangeHandler(pageNo) {
      this.tblOpts.pageNo = pageNo
      this.$emit('on-pagination', this.tblOpts.pageNo)
    },
    handleClick(method, row, scope, event, column) {
      this.$emit('row-' + method, row, scope.$index, event, column)
    }
  },
  mounted() {
  }
}
</script>
